<style>
  .layui-table-body {
    height: 100% !important;
  }
</style>

<table id="demo" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  </div>
</script>

<script type="text/html" id="toolEventDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
  //单元格工具事件
  layui.use("table", function () {
    var table = layui.table;

    table.render({
      elem: "#demo",
      height: 312,
      url: "../public/static/json/table/user.json", //数据接口
      page: true, //开启分页
      cols: [
        [
          //表头
          {
            field: "id",
            title: "ID",
            width: 80,
            sort: true,
            fixed: "left",
          },
          { field: "username", title: "用户名", width: 80 },
          { field: "sex", title: "性别", width: 80, sort: true },
          { field: "city", title: "城市", width: 80 },
          { field: "sign", title: "签名", width: 177 },
          { field: "experience", title: "积分", width: 80, sort: true },
          { field: "score", title: "评分", width: 80, sort: true },
          { field: "classify", title: "职业", width: 80 },
          { field: "words", title: "字数", width: 135, sort: true },
          { title: "操作", width: 200, templet: "#toolEventDemo" },
        ],
      ],
      toolbar: "#toolbarDemo", //开启工具栏
    });

    //单元格工具事件
    table.on("tool(test)", function (obj) {
      // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if (layEvent === "detail") {
        //查看
        //do somehing
      } else if (layEvent === "del") {
        //删除
        layer.confirm("确定删除吗？", function (index) {
          obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
          layer.close(index);

          // 向服务端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
          /*
              table.reloadData(id, {
                scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
              });
              */
        });
      } else if (layEvent === "edit") {
        //编辑
        //do something

        // 同步更新缓存对应的值
        // 该方法仅为前端层面的临时更新，在实际业务中需提交后端请求完成真实的数据更新。
        obj.update({
          username: "123",
          title: "abc",
        });
        // 若需更新其他包含自定义模板并可能存在关联的列视图，可在第二个参数传入 true
        obj.update(
          {
            username: "123",
          },
          true
        ); // 注：参数二传入 true 功能为 v2.7.4 新增

        // 当发送后端请求成功后，可再通过 reloadData 方法完成数据重载
        /*
            table.reloadData(id, {
              scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
            });
            */
      } else if (layEvent === "add") {
        layer.open({
          type: 2,
          content: "http://sentsin.com", //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
        });
      }
    });
  });
</script>
